<template>
  <div :class="{'wrapper__store__item': true, 'wrapper__store__item--bordered': hideBorder ? false : true}">
    <div class="avatar">
      <img width="50"
           height="50"
           :src="item.img"
           alt="">
    </div>
    <div class="desc">
      <p class="store_name">{{ item.name }}</p>
      <p class="sale_trans">
        <span>月售{{ item.monthSale }}</span>
        <span>起送￥{{ item.beginTrans }}</span>
        <span>基础运费￥{{ item.freight }}</span>
      </p>
      <p class="vip">{{ item.vipDesc }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item', 'hideBorder'],
  data () {
    return {
    }
  }
}
</script>

<style lang='scss' scoped>
@import "../style/mixin.scss";
.wrapper__store__item {
  display: flex;
  margin: 0.1rem 0;
  padding-bottom: 0.1rem;
  &--bordered {
    border-bottom: 1px solid #f1f1f1;
  }

  .avatar {
    width: 0.6rem;
    height: 0.5rem;
    background-color: salmon;
    border-radius: 50%;
  }
  img {
    background-color: orange;
    border-radius: 1rem;
  }
  .desc {
    margin-left: 0.16rem;
    width: 100%;
    .store_name {
      font-size: 0.15rem;
    }
    .sale_trans {
      margin: 0.1rem 0;
      span {
        font-size: 0.13rem;
      }
      span:nth-child(2) {
        margin: 0 0.16rem;
      }
    }
    p.vip {
      font-size: 0.12rem;
      color: #f51818bf;
      width: 80%;
      @include ellipsis;
    }
  }
}
</style>
